<template>
  <table class="pure-table">
    <thead>
      <tr>
        <th>参数名称</th>
        <th>值</th>
        <th style="width: 90px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in requestData" :key="index">
        <td>
          <el-input v-model="item.key" placeholder="请输入"></el-input>
        </td>
        <td>
          <el-input v-model="item.value" placeholder="请输入" />
        </td>
        <td style="width: 90px"><span class="del" @click="delRow(index)">删除</span></td>
      </tr>
      <tr>
        <td colspan="3">
          <el-button type="primary" @click="addRow">+增加参数</el-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  emits: ["callRequest"],
  props: ["tableData", "mode"],
  setup(props, ctx) {
    const store = useStore();
    const requestData = ref([]);
    const delRow = (index) => {
      requestData.value.splice(index, 1);
    };
    const storeOptions = () => {
      let optionList = store.state.app.serviceBody.inParamsList || [];
      let list = optionList.map((item) => {
        return "${" + item.paramName + "}";
      });
      return list;
    };
    const options = ref(storeOptions());
    const addRow = () => {
      requestData.value.push({ key: "", value: "", testValue: "" });
      console.log(requestData.value);
    };
    watch(
      () => requestData,
      (newData, oldData) => {
        ctx.emit("callRequest", requestData.value);
      },
      { deep: true }
    );
    watch(
      () => props.tableData,
      (newData, oldData) => {
        requestData.value = props.tableData;
      },
      { deep: true }
    );
    watch(
      () => store.state.app.serviceBody.ifParam.adptIfCfgHttp.inParamsFormat,
      (val) => {
        if (props.mode == "headers") {
          if (val == "JSON") {
              requestData.value.push({ key: "Content-Type", value: "application/json", testValue: "application/json" });
          }else{
              requestData.value.map((item,index)=>{
                  if (item.key == "Content-Type") {
                      requestData.value.splice(index, 1);
                  }
              })
          }
        }
        
      },
      { deep: true }
    );
    onMounted(() => {
    });
    return {
      requestData,
      addRow,
      delRow,
      options,
    };
  },
});
</script>
<style scoped lang="scss">
thead,tbody{
  th,td {
    width: calc(50% - 45px);
  }
}
</style>